<template>
	<view class="rank-page">
		<z-header>排行</z-header>
		<view class="wraper">
			<view class="item" v-for="(v, i) in authors" :key="i" :data-active="currentAvatar===i">
				<avatar class="avatar" :src="v.avatarUrl" circle></avatar>
			</view>
		</view>
	</view>
</template>

<script>
	import playlist from '@/pages/play/playlist'
	export default {
		components:{playlist},
		data() {
			return {
				currentAvatar: 2,
				authors: [
					{name:'Mark Robertson', focused:false, focus: '20,988', _id:1, avatarUrl:'/static/avatar1.jpg'},
					{name:'Mark Robertson2', focused:true, focus: '20,978', _id:2, avatarUrl:'/static/avatar2.jpg'},
					{name:'Mark Robertson3', focused:false, focus: '208', _id:3, avatarUrl:'/static/avatar3.jpg'},
					{name:'Mark Robertson4', focused:false, focus: '2,098', _id:4, avatarUrl:'/static/avatar1.jpg'},
					{name:'Mark Robertson5', focused:true, focus: '2,088', _id:5, avatarUrl:'/static/avatar2.jpg'},
					{name:'Mark Robertson6', focused:false, focus: '209', _id:6, avatarUrl:'/static/avatar3.jpg'},
				],
			}
		},
		methods: {
		}
	}
</script>

<style lang="scss" scoped>
.rank-page{
	width: 100%;
	overflow-x: hidden;
	.wraper{
		display: flex;
		align-items: center;
		margin: 40upx 0;
		padding: 0 10upx;
		.item{
			margin: 0 20upx;
			opacity: 0.5;
			&[data-active="true"]{
				opacity: 1;
				box-sizing: content-box;
				margin: 0 30upx;
				.avatar{
					font-size: 50upx;
					box-shadow: 0 0 0 10upx rgba(255,255,255,0.15);
				}
			}
		}
	}
}
.avatar-item{
	margin: 0 20upx;
	opacity: .5;
	&:first-of-type{
		
	}
}
.rank-page{
	.h1, .p1{
		text-align: center;
	}
	.h1{
		font-size: $font-size-lg + 8upx;
		letter-spacing: 2upx;
	}
	.p1{
		font-size: $font-size-sm;
		opacity: .5;
		margin: 10upx 0;
	}
	.focus-btn{
		width: 180upx;
		height: 2.5em;
		border: solid 1upx rgba(255,255,255,.8);
		border-radius: 6upx;
		font-size: $font-size-md;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 20upx auto 40upx;
		&:active{
			opacity: .8;
		}
	}
}
</style>
